<template>
  <div class="product-con" ref="box" v-if="showAll">
    <div id="title0">
      <product-con-swiper
        :img-urls="storeInfo.slider_image"
        :videoline="storeInfo.video_link"
      ></product-con-swiper>
      <!-- 砍价标签 结束倒计时 -->
      <div class="active_label1">
        <div class="free_buy">
          <p class="left" v-if="!$route.query.order_id">
            <span style="font-size:.3rem;font-weight:600;">￥</span
            >{{ attr.productSelect.price }}
          </p>
          <p class="left" v-else>
            <span style="font-size:.3rem;font-weight:600;">￥</span
            >{{ cutInfo.product.price || 0 }}
          </p>
          <div class="right">
            <p class="likeTitle">限时砍价：</p>
            <span class="time">
              <van-count-down :time="downTime" ref="countDown">
                <template #default="timeData">
                  <span class="block">
                    {{ formatTime(timeData.days * 24 + timeData.hours) }}
                  </span>
                  <span class="colon">:</span>
                  <span class="block">{{ formatTime(timeData.minutes) }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ formatTime(timeData.seconds) }}</span>
                </template>
              </van-count-down>
            </span>
          </div>
        </div>
      </div>
      <div class="wrapper">
        <div class="share acea-row row-between row-bottom">
          <div class="money font-color-red">
            <div
              v-if="!$route.query.order_id"
              class="old_price"
              style="font-size:.4rem;color:rgba(192,192,192,1);text-decoration: line-through;font-weight:400;"
            >
              ￥{{ attr.productSelect.ot_price }}
            </div>
            <div
              v-else
              class="old_price"
              style="font-size:.4rem;color:rgba(192,192,192,1);text-decoration: line-through;font-weight:400;"
            >
              ￥{{ cutInfo.product.total_price || 0 }}
            </div>
          </div>
          <p class="title-detail">
            {{ storeInfo.store_name }}
          </p>
        </div>
        <div class="cut_attr" v-if="$route.query.order_id">
          <span>规格：</span>
          <span
            >{{ cutInfo.product.cart_num }}{{ cutInfo.product.unit_name }}</span
          >
        </div>
      </div>
      <template v-if="!$route.query.order_id">
        <div class="choice-type" v-if="storeInfo.is_virtual == 0">
          <span class="choice-title">服务</span>
          <span v-show="storeInfo.is_seven_returned == 1" class="choice-content"
            >7天无理由退货</span
          >
          <span v-show="storeInfo.is_seven_returned == 0" class="choice-content"
            >不支持7天无理由退货</span
          >
          <img
            src="@assets/images/ask.png"
            alt=""
            class="showReturnGoods"
            @click.stop="isShowreturn(storeInfo.is_seven_returned)"
          />
          <img
            src="@assets/images/returnGoods.png"
            alt=""
            class="returnGoods"
            v-show="showreturn"
          />
          <img
            src="@assets/images/returnGoods0.png"
            alt=""
            class="returnGoods0"
            v-show="showreturn0"
          />
        </div>
        <div class="choice-type">
          <span class="choice-title">库存</span>
          <span
            class="choice-content"
            v-if="
              attr.productSelect.stock >= 100 &&
                attr.productSelect.stock <= 1000
            "
          >
            {{ attr.productSelect.stock }} {{ attr.storeInfo.unit_name }}
          </span>
          <span
            class="choice-content"
            style="color:rgba(252, 64, 74, 1);"
            v-if="attr.productSelect.stock < 100"
          >
            剩余{{ attr.productSelect.stock }}
            {{ attr.storeInfo.unit_name }} 库存紧张
          </span>
          <span class="choice-content" v-if="attr.productSelect.stock > 1000">
            库存充足
          </span>
          <span class="rightnum"
            >{{ storeInfo.sales + storeInfo.ficti }}
            {{ storeInfo.unit_name }}</span
          >
          <span class="righttitle">已售</span>
        </div>
        <div class="choice-type">
          <span class="choice-title">已选</span>
          <span class="choice-content">{{ attrValue }} </span>
        </div>
        <div class="choice-type" v-if="storeInfo.is_virtual == 0">
          <span class="choice-title">配送</span>
          <span class="choice-content">普通快递</span>
        </div>
        <div class="goodDetail-title">
          <span class="img"></span>
          <span class="span">商品详情</span>
          <span class="img"></span>
        </div>
        <div class="product-intro" id="title3">
          <div class="conter" v-html="storeInfo.description"></div>
        </div>
      </template>
      <template v-else>
        <div class="record">
          <div class="title">
            <img src="../../assets/images/cutPrice/left_icon.png" alt="" />
            <span>砍价记录</span>
            <img src="../../assets/images/cutPrice/right_icon.png" alt="" />
          </div>
          <div class="free">
            <span>已砍<i>{{ cutInfo.bargain.already_price }}</i>元，仅差<i>{{ cutInfo.bargain.diff_price }}</i>元免费拿</span>
          </div>
          <div
            class="item"
            v-for="(item, index) in cutInfo.bargain_list"
            :key="index"
          >
            <div class="left">
              <span class="avatar">
                <img :src="item.avatar" alt="" />
              </span>
              <span class="des">
                <span class="des_name">{{ item.nickname }}</span>
                <span class="des_text">为你助力砍价</span>
              </span>
            </div>
            <div class="right">
              <span>砍掉<i>{{ item.bargain_price }}</i>元</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div style="height:1.2rem;"></div>
    <!-- 底部  -->
    <div class="footer acea-row row-between-wrapper" v-if="isEnd==0">
      <div class="bnt acea-row" v-if="!$route.query.order_id">
        <div class="buy" @click="selecAttrTap(2)">
          邀友砍价
        </div>
        <div class="joinCart" @click="selecAttrTap(1)">
          立即购买
        </div>
      </div>
      <div class="bnt acea-row" v-else>
        <div
          v-if="cutInfo.bargain.is_over == 3"
          class="buy1"
          @click="cutBuy"
        >
          立即购买
        </div>
        <div v-else class="buy1 end">{{cutInfo.bargain.is_over == 1 ? '订单已支付' : '订单已结束'}}</div>
      </div>
    </div>
    <div class="footer acea-row row-between-wrapper" v-else>
      <div class="bnt acea-row">
        <div
          class="buy1"
          @click="toStore"
        >
          活动已结束，去听见小店购买
        </div>
      </div>
    </div>
    <Product-cut-price-window v-on:changeFun="changeFun" :attr="attr" :attrValue="attrValue" />
    <confirm-address
      :key="address_key"
      :info="addressInfo"
      :buyType="buyType"
      @changeFun="changeFun"
    />
    <Payment v-model="payFlag" @checked="payType" />
    <div
      class="mask"
      @touchmove.prevent
      @click="listenerActionClose"
      v-show="posters"
    ></div>
    <!-- 分享提示 -->
    <div
     class="share_tip" 
     v-show="shareFlag && $route.params.shareTip" 
     @touchmove.prevent
     @touchstart="shareFlag = false"
     >
      <div>
        <img src="../../assets/images/cutPrice/share_tip.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
import ProductConSwiper from "@components/ProductConSwiper";
import shareMsg from "../../assets/js/common/shareConfig.js";
import share from "../../assets/js/common/share.js";
import ProductCutPriceWindow from "@components/ProductCutPriceWindow";
import confirmAddress from "@components/confirmAddress";
import Payment from "@components/Payment";
import { deviceType } from "@utils";
// import  wxback  from "@mixins/wxBack.js";
import {
  getProductDetail,
  postCartAdd
} from "@api/store";
import { getAddressList } from "@api/user";
import {
  postOrderConfirm,
  postOrderComputed,
  createOrder,
} from "@api/order";
import { payOrderHandle } from "@libs/order";
import { cutDetail } from "@api/cutPrice";
import { isWeixin } from "@utils/index";
import { mapGetters, mapState } from "vuex";
import dialog from "@utils/dialog";
import cookie from 'js-cookie';
import base from "@common/base";
let NAME = "cutPriceDetails";
import qs from "qs";
import Vue from "vue";
import { CountDown } from "vant";
Vue.use(CountDown);
export default {
  name: NAME,
  components: {
    ProductConSwiper,
    ProductCutPriceWindow,
    confirmAddress,
    Payment
  },
  data: function() {
    return {
      shareFlag:true,
      downTime:0,// 砍价倒计时时间
      cutInfo: {},
      orderInfo: {}, // 创建后的订单信息
      buyType: 1, // 购买类型 ，1立即购买，2 创建砍价订单
      payActive: "weChatPay", // 支付类型
      payFlag: false, // 支付弹框开关
      confirmInfo: {}, //订单提交的信息
      address_key: 1,
      addressInfo: {
        flag: false,
        storeInfo: {},
        address: {}
      },

      showAll: false,
      weixinStatus: false,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
        storeInfo: {}
      },
      isOpen: false, //是否打开属性组件
      productValue: [],
      id: 0, // 商品id
      storeInfo: {},
      attrValue: "",
      posters: false,
      lock: false,
      showreturn: false, //服务图标展示与否
      showreturn0: false,
      from1: "",
    };
  },
  // mixins: [wxback],
  computed:{
    ...mapState({
      isEnd:state => state.cut.isEnd,
      shop_number:state => state.cut.shop_number
    })
  },
  watch: {
    $route(n) {
      if (n.name === NAME) {
        this.id = n.query.goodId;
        this.storeInfo.slider_image = [];
        this.init();
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    const { name } = from
    next(vm =>{
      if(name == 'AddAddress' || name == 'AddressManagement'){
        vm.getAddress()
      }else{
        vm.attr.cartAttr = false
        vm.addressInfo.flag = false
        vm.payFlag = false
      }
    })
    
  },
  mounted() {
    const { from1 = "h5" } = this.$route.query;
    cookie.set("from1", from1);
    if (from1 === "app") {
      if(deviceType() === 'android') this.appBridge("title", { title: "商品详情" });
      this.appBridge("getParameter", { method: "setUserInfo" });
      window["onWebResponse"] = async str => {
        const {action,content} = await this.appResponse(str);
        if(action === 'setUserInfo'){
          if(content.token!= 'undefined' && content.token&&content.token != 'TOKEN'){
            this.$store.dispatch('cut/userInfo')
          }
          
        }
      };
    }
    if (isWeixin()) {
      cookie.set("detailId", this.$route.query.goodId);
    } else {
      if (from1 != "app") {
        window.location.href = 'http://share.cbct.cn/downloadPage'
      }
    }
    this.id = this.$route.query.goodId;
    this.from1 = from1;
    this.storeInfo.slider_image = [];
    this.init();
  },
  methods: {
    init() {
      this.double();
      this.$store.dispatch('cut/isEnd')
      localStorage.setItem('cutUrl',window.location.href)
      this.showAll = false;
      document.scrollingElement.scrollTop = 0;
      this.shareFlag = true
      setTimeout(() => {
        if (this.$route.query.order_id) {
          this.cutDetail();
        } else {
          this.productCon();
        }
      }, 100);
    },
    toStore(){
      this.$router.push(`/goods_list/${this.shop_number}?from1=${this.from1}`)
    },
    // 倒计时格式化
    formatTime(time){
      return time >=10 ? time : `0${time}`
    },
    /**
     * @type 购买类型 true立即购买 false创建砍价
     */
    isBuyNow(type, rePay = "") {
      this.addCart(type);
    },
    cutBuy:dialog.confirm(function(){
      this.payFlag = true;
    },'是否以当前价格购买商品？'),
    //选择支付类型去支付
    payType(value) {
      this.payActive = value;
      if (this.$route.query.order_id) {
        this.rePay();
      } else {
        this.createOrder();
      }
    },
    // 加入购物车
    async addCart(showPay) {
      const { cart_num = 1, unique = "" } = this.attr.productSelect;
      const params = {
        productId: this.$route.query.goodId,
        cartNum: cart_num,
        new: 1,
        secKillId: 0,
        mer_id: 0,
        uniqueId: unique
      };
      try {
        const res = await postCartAdd(params);
        if (res.status == 200) {
          this.orderConfirm(res.data.cartId,showPay);
        }
      } catch (error) {
        this.$dialog.toast({mes:error.msg})
      }
    },
    // 计算价格
    // async computedPrice(){
    //   const params = {
    //     addressId: this.addressInfo.address.id,
    //     useIntegral: 0,
    //     couponId: 0,
    //     shipping_type: 1,
    //     payType: this.payActive,
    //     type: 0
    //   }
    //   const res = await postOrderComputed(this.orderGroupInfo.orderKey,params)
    // },
    // 提交订单
    async orderConfirm(cart_id,showPay) {
      const params = {
        cartIdArr: [cart_id],
        type: 0,
        addressId: cookie.get("address_id") || undefined
      };
      try {
        const res = await postOrderConfirm(params);
        if (res.status == 200) {
          this.confirmInfo = res.data;
          // this.computedPrice()
          if(showPay){
            this.payFlag = true;
          }
          if (this.buyType == 2) {
            this.createOrder();
          }
        }
      } catch (error) {
        this.$dialog.toast({mes:error.msg})
      }
    },
    // 支付来源
    payFrom() {
      let payFrom = isWeixin() ? "weChatPayH5" : "weChatPayPage";
      const { from1 ='h5' } = this.$route.query;
      if (this.payActive == "weChatPay") {
        if (from1 == "app") {
          payFrom = "weChatPayApp";
        } else if (from1 == "wxapp") {
          payFrom = "weChatPaywxApp";
        }
      } else {
        if (from1 == "app") {
          payFrom = "aliPayApp";
        } else {
          payFrom = "aliPayH5";
        }
      }
      return payFrom;
    },
    // 创建订单
    async createOrder() {
      const orderParams = {
        real_name: this.addressInfo.address.real_name,
        phone: this.addressInfo.address.phone,
        addressId: this.addressInfo.address.id,
        useIntegral: 0, // 是否用积分
        couponId: 0, // 优惠劵
        payType: this.payActive,
        pinkId: 0, // 会员
        seckill_id: this.confirmInfo.seckill_id,
        combinationId: this.confirmInfo.combination_id,
        bargainId: this.confirmInfo.bargain_id,
        from: this.payFrom(),
        mark: "", // 备注
        shipping_type: 1,
        store_id: 0, //门店
        isIospay: deviceType(),
        is_inv: 0,
        is_con: 1, // 发票类型
        invType: "1",
        upType: 1, // 抬头类型
        up: "", // 抬头名称
        tax: "", // 发票税号
        email: "",
        mer_id: 0,
        oId: cookie.get("OID"),
        new_bargain_type: this.buyType == 1 ? 2 : 1,
        share_sign: this.$route.query.shareUserId || ''
      };
      this.$dialog.loading.open("生成订单中");
      try {
        const res = await createOrder(this.confirmInfo.orderKey, {
          ...orderParams
        });
        if (res.status == 200) {
          this.orderInfo = res.data;
          if (this.buyType == 1) {
            // 立即支付
            this.handleOrderInfo(res.data);
          } else {
            // 不支付，创建砍价
            let query = this.$route.query;
            query = {
              ...query,
              order_id: res.data.result.orderId
            };
            // eslint-disable-next-line prettier/prettier
            this.$router.push({
              name:`cutPriceDetails`,
              params:{
                shareTip:true
              },
              query
            });
          }
        }
        this.$dialog.loading.close();
      } catch (error) {
        this.$dialog.loading.close();
        this.$dialog.error(error.msg || "创建订单失败");
      }
    },
    // 重新支付
    async rePay() {
      const params = [
        this.cutInfo.order_id,
        this.payActive,
        this.payFrom(),
        deviceType(),
        cookie.get("OID")
      ];
      const res = await payOrderHandle(...params);
      if (res.status == 'SUCCESS') {
        const url = "/order/status/" + res.result.order_id;
        this.$router.replace(`${url}/1`);
      }
    },
    // 订单处理
    handleOrderInfo(res) {
      let url = "/order/status/" + res.result.orderId;
      switch (res.status) {
        case "ORDER_EXIST":
        case "EXTEND_ORDER":
        case "PAY_DEFICIENCY":
        case "PAY_ERROR":
          this.$dialog.toast({ mes: res.msg });
          this.$router.replace(`${url}/0?msg=${res.msg}`);
          break;
        case "SUCCESS":
          this.$dialog.success(res.msg);
          this.$router.replace(`${url}/1`);
          break;
        case "WECHAT_PAY":
          WeixinJSBridge.invoke(
            "getBrandWCPayRequest",
            {
              appId: res.result.jsConfig.appId,
              nonceStr: res.result.jsConfig.nonceStr,
              package: res.result.jsConfig.package,
              signType: res.result.jsConfig.signType,
              timeStamp: res.result.jsConfig.timestamp,
              paySign: res.result.jsConfig.paySign
            },
            res => {
              WeixinJSBridge.log(res.err_msg + "err");
              this.$router.replace(`${url}/4`);
            }
          );
          break;
        case "WECHAT_APP_PAY":
        case "ALI_APP_PAY":
          this.appBridge("pay", { type: this.payActive, data: res.result });
          break;
        case "WECHAT_WXAPP_PAY":
          this.payTypeWxapp(res.result);
          break;
      }
    },
    // 小程序去支付
    payTypeWxapp: function(data) {
      const query = qs.stringify(data.jsConfig)
      wx.miniProgram.navigateTo({
        url:`/pages/pay/pay?${query}`
      });
    },
    // 用户地址
    async getAddress() {
      const res = await getAddressList({ page: 1 });
      if (res.status == 200) {
        const address_id = cookie.get("address_id");
        if (address_id) {
          this.addressInfo.address = res.data.filter(
            item => item.id == address_id
          )[0] || {};
        } else {
          this.addressInfo.address = res.data.length ? res.data[0] : {};
        }
        this.address_key++;
      }
    },
    // 地址弹框
    editAddress(state) {
      if (state) {
        this.addressInfo.storeInfo = {
          ...this.attr.productSelect,
          attrValue: this.attrValue
        };
      }

      this.addressInfo.flag = state;
    },
    // 无理由弹框
    isShowreturn: function(num) {
      var that = this;
      if (num == 1) {
        this.showreturn = !this.showreturn;
        if (this.showreturn) {
          var timer1 = setTimeout(() => {
            that.showreturn = false;
            clearTimeout(timer1);
          }, 2000);
        }
      }
      if (num == 0) {
        this.showreturn0 = !this.showreturn0;
        if (this.showreturn0) {
          var timer0 = setTimeout(() => {
            that.showreturn0 = false;
            clearTimeout(timer0);
          }, 2000);
        }
      }
    },
    // 砍价详情
    async cutDetail() {
      const params = {
        order_id: this.$route.query.order_id,
        from:this.$route.query.pageFrom == 'orderList' ? 1 : undefined
      };
      try {
        const res = await cutDetail({ ...params });
        if (res.status == 200) {
          this.showAll = true;
          this.cutInfo = res.data;
          this.storeInfo.slider_image = [res.data.product.image];
          this.cutInfo.bargain_list = this.cutInfo.bargain_list.map(item => ({...item, avatar:`${base.imgUrl()}${item.avatar}`}))
          this.downTime = res.data.bargain.order_end_time
          const query = JSON.parse(JSON.stringify(this.$route.query))
          const route_path = this.$route.path
          let share_url = window.location.href.split('?')[0]
          share_url = `${share_url.split(route_path)[0]}/cutPrice/cutPage`
          let shareParams = [
            `${share_url}?${qs.stringify(query)}`,
            res.data.product.name,
            '帮我点下助力，送你40元新人红包',
            'http://img001.seefm.com.cn/image/bargain_share_2021.png'
          ]
          if (this.from1 == "app") {
            query.from1 = 'h5'
            shareMsg.shareConfig(
              "app",
              "0",
              "0",
              res.data.product.name,
              '帮我点下助力，送你40元新人红包',
              `${share_url}?${qs.stringify(query)}`,
              'http://img001.seefm.com.cn/image/bargain_share_2021.png',
              "",
              "1"
            );
          }
          share.share(...shareParams);
          share.QQshare(...shareParams);
        }
      } catch (error) {
        this.$dialog.toast({mes:error.msg})
        this.$router.back()
      }
    },
    //商品详情
    async productCon() {
      let that = this;
      const {from1 = 'h5', order_id = ''} = this.$route.query
      try {
        const res = await getProductDetail(that.id, { mer_id: 0 })
        if(res.status == 200){
          this.showAll = true;
          let query = JSON.parse(JSON.stringify(this.$route.query))
          query = {
            ...query,
            shareUserId:cookie.get('cutUid')
          }
          const share_url = window.location.href.split('?')[0]
          const {store_name, image, ot_price, price} = res.data.storeInfo
          const shareParams = [
            `${share_url}?${qs.stringify(query)}`,
            '听见广播年货节 爆款商品千万补贴',
            `${store_name}原价${ot_price}元，超值价${price}元`,
            image
          ]
          if (from1 == "app") {
            query.from1 = 'h5'
            shareMsg.shareConfig(
              "app",
              "0",
              "0",
              '听见广播年货节 爆款商品千万补贴',
              `${store_name}原价${ot_price}元，超值价${price}元`,
              `${share_url}?${qs.stringify(query)}`,
              image,
              "",
              "1",
              "0",
              "1"
            );
          }
          share.share(...shareParams);
          share.QQshare(...shareParams);
          this.addressInfo.cur_num = res.data.bargain_existing_order_num+1
          this.addressInfo.total_num = res.data.bargain_total_create_order_num
          this.downTime = res.data.bargain_remaining_time
          that.$set(that, "storeInfo", res.data.storeInfo);
          that.$set(that.attr, "productAttr", res.data.productAttr);
          that.$set(that.attr, "storeInfo", res.data.storeInfo);
          that.$set(that, "productValue", res.data.productValue);
          that.DefaultSelect();

          
        }
      } catch (error) {
        this.$dialog.error(error.msg);
      }
    },
    //默认选中属性；
    DefaultSelect: function() {
      let productAttr = this.attr.productAttr,
        value = [];
      for (var key in this.productValue) {
        if (this.productValue[key].stock > 0) {
          value = this.attr.productAttr.length ? key.split(",") : [];
          break;
        }
      }
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], "index", value[i]);
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.sort().join(",")];
      console.log(value.sort().join(","));
      if (productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          "store_name",
          this.storeInfo.store_name
        );
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.price);
        this.$set(this.attr.productSelect, "ot_price", productSelect.ot_price);
        this.$set(this.attr.productSelect, "stock", productSelect.stock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", value.sort().join(","));
      } else if (!productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          "store_name",
          this.storeInfo.store_name
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "ot_price", this.storeInfo.ot_price);
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
      } else if (!productSelect && !productAttr.length) {
        this.$set(
          this.attr.productSelect,
          "store_name",
          this.storeInfo.store_name
        );
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "ot_price", this.storeInfo.ot_price);
        this.$set(this.attr.productSelect, "stock", this.storeInfo.stock);
        this.$set(
          this.attr.productSelect,
          "unique",
          this.storeInfo.unique || ""
        );
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", "");
        console.log(this.attrValue);
      }
      console.log(this.attr.productSelect);
    },
    //将父级向子集多次传送的函数合二为一；
    changeFun: function(opt) {
      if (typeof opt !== "object") opt = {};
      let action = opt.action || "";
      let value = opt.value === undefined ? "" : opt.value;
      this[action] && this[action](value);
    },
    //打开属性插件 type 1 立即购买 2 创建砍价订单
    selecAttrTap(type) {
      if(!cookie.get('login_status')){
        if(this.from1 === 'app'){
          this.appBridge('login')
        }else{
          this.$router.push('/login')
        }
        return
      }
      this.attr.cartAttr = true;
      this.isOpen = true;
      this.buyType = type;
      this.getAddress();
    },
    changeattr: function(msg) {
      this.attr.cartAttr = msg;
      this.isOpen = false;
    },
    //选择属性；
    ChangeAttr: function(res) {
      let productSelect = this.productValue[res];
      if (productSelect) {
        this.$set(this.attr.productSelect, "image", productSelect.image);
        this.$set(this.attr.productSelect, "price", productSelect.price);
        this.$set(this.attr.productSelect, "ot_price", productSelect.ot_price);
        this.$set(this.attr.productSelect, "stock", productSelect.stock);
        this.$set(this.attr.productSelect, "unique", productSelect.unique);
        this.$set(this.attr.productSelect, "cart_num", 1);
        this.$set(this, "attrValue", res);
      } else {
        this.$set(this.attr.productSelect, "image", this.storeInfo.image);
        this.$set(this.attr.productSelect, "price", this.storeInfo.price);
        this.$set(this.attr.productSelect, "ot_price", this.storeInfo.ot_price);
        this.$set(this.attr.productSelect, "stock", 0);
        this.$set(this.attr.productSelect, "unique", "");
        this.$set(this.attr.productSelect, "cart_num", 0);
        this.$set(this, "attrValue", "");
      }
    },
    listenerActionSheet: function() {
      if (isWeixin() === true) {
        this.weixinStatus = true;
      }
      this.posters = true;
    },
    listenerActionClose: function() {
      this.posters = false;
    },
    // 解决ios双击下滑
    double() {
      var agent = navigator.userAgent.toLowerCase(); //检测是否是ios
      var iLastTouch = null; //缓存上一次tap的时间
      if (agent.indexOf("iphone") >= 0 || agent.indexOf("ipad") >= 0) {
        document.body.addEventListener(
          "touchend",
          function(event) {
            var iNow = new Date().getTime();
            iLastTouch =
              iLastTouch || iNow + 1 /** 第一次时将iLastTouch设为当前时间+1 */;
            var delta = iNow - iLastTouch;
            if (delta < 500 && delta > 0) {
              event.preventDefault();
              return false;
            }
            iLastTouch = iNow;
          },
          false
        );
      }
    }
  },
  beforeDestroy: function() {},
  destroyed: function() {
    var shareUrl = window.location.href;
    if (shareUrl.indexOf("from1=app") != "-1") {
      shareMsg.shareConfig(
        "app",
        "0",
        "0",
        "res.data.storeInfo.store_name",
        "res.data.merchant_name",
        "shareUrl",
        "",
        "",
        "0"
      );
    }
  }
};
</script>
<style scoped>
.mask {
  z-index: 888 !important;
}
.activity_pin {
  width: auto;
  height: 0.44rem;
  background: linear-gradient(
    90deg,
    rgba(233, 51, 35, 1) 0%,
    rgba(250, 101, 20, 1) 100%
  );
  opacity: 1;
  border-radius: 0.22rem;
  padding: 0 0.2rem;
  margin-left: 0.19rem;
}
.activity_miao {
  width: auto;
  height: 0.44rem;
  padding: 0 0.2rem;
  background: linear-gradient(
    90deg,
    rgba(250, 102, 24, 1) 0%,
    rgba(254, 161, 15, 1) 100%
  );
  opacity: 1;
  border-radius: 0.22rem;
  margin-left: 0.19rem;
}
.iconfonts {
  color: #fff !important;
  font-size: 0.28rem;
  display: block;
}
.activity_title {
  font-size: 0.24rem;
  color: #fff;
}
.activity_kan {
  width: auto;
  height: 0.44rem;
  padding: 0 0.2rem;
  background: linear-gradient(
    90deg,
    rgba(254, 159, 15, 1) 0%,
    rgba(254, 178, 15, 1) 100%
  );
  opacity: 1;
  border-radius: 0.22rem;
  margin-left: 0.19rem;
}
.addressBox .phone {
  margin-left: 1.1rem;
}
.corlor-red {
  color: #fc4141;
}
.store-box {
  padding: 0 0.3rem;
  border-bottom: 1px solid #f5f5f5;
}
.geoPage {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 10000;
}
.product-con .header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 0.96rem;
  font-size: 0.3rem;
  color: #050505;
  background-color: #fff;
  z-index: 11;
  border-bottom: 0.01rem solid #eee;
}
.product-con .header .item {
  position: relative;
  margin: 0 0.35rem;
}
.product-con .header .item.on:before {
  position: absolute;
  width: 0.6rem;
  height: 0.05rem;
  background-repeat: no-repeat;
  content: "";
  background: linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -webkit-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  background: -moz-linear-gradient(to left, #ff3366 0%, #ff6533 100%);
  bottom: -0.1rem;
}
.product-con .store-info {
  margin-top: 0.2rem;
  background-color: #fff;
}
.product-con .store-info .title {
  font-size: 0.28rem;
  color: #282828;
  height: 0.8rem;
  line-height: 0.8rem;
  border-bottom: 0.01rem solid #f5f5f5;
}
.product-con .store-info .info {
  padding: 0 0.3rem;
  height: 1.26rem;
}
.store-info .icon-jiantou {
  color: #7a7a7a;
  font-size: 0.28rem;
}
.product-con .store-info .info .pictrue {
  width: 0.76rem;
  height: 0.76rem;
}
.product-con .store-info .info .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}
.product-con .store-info .info .text {
  width: 56%;
}
.product-con .store-info .info .text .name {
  font-size: 0.3rem;
  color: #282828;
}
.product-con .store-info .info .text .address {
  font-size: 0.24rem;
  color: #666;
  margin-top: 0.03rem;
}
.product-con .store-info .info .text .address .iconfont {
  color: #707070;
  font-size: 0.18rem;
  margin-left: 0.1rem;
}
.address_tit {
  max-width: 88% !important;
}
.addressTxt {
  width: auto;
  font-size: 0.24rem;
}
.product-con .store-info .info .iconfont {
  font-size: 0.4rem;
}
.product-con .superior {
  background-color: #fff;
  margin-top: 0.2rem;
}
.product-con .superior .title {
  height: 0.98rem;
}
.product-con .superior .title img {
  width: 0.3rem;
  height: 0.3rem;
}
.product-con .superior .title .titleTxt {
  margin: 0 0.2rem;
  font-size: 0.3rem;
  background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  background-image: -webkit-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  background-image: -moz-linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.product-con .superior .slider-banner {
  width: 6.9rem;
  margin: 0 auto;
  padding-bottom: 0.2rem;
}
.product-con .superior .slider-banner .list {
  width: 100%;
  padding-bottom: 0.2rem;
}
.product-con .superior .slider-banner .list .item {
  width: 2.15rem;
  margin: 0 0.21rem 0.2rem 0;
  font-size: 0.26rem;
}
.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}
.product-con .superior .slider-banner .list .item .pictrue {
  width: 100%;
  height: 2.15rem;
  position: relative;
}
.product-con .superior .slider-banner .list .item .pictrue img {
  width: 100%;
  height: 100%;
  border-radius: 0.06rem;
}
.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 0.12rem;
}
.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}
.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: #e93323;
}
.product-con .product-bg .pages {
  position: absolute;
  background-color: rgba(139, 135, 153, 0.36);
  height: 0.4rem;
  width: 1.1rem;
  right: 0rem;
  bottom: 0.3rem;
  box-sizing: border-box;
  line-height: 0.4rem;
  padding-left: 0.22rem;
  font-size: 0.24rem;
  border-radius: 0.2rem 0 0 0.2rem;
  color: rgba(255, 255, 255, 1);
  z-index: 9;
}
.mask {
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  z-index: 888 !important;
}
.product-con .product-intro .conter{
  word-break: break-all;
  width: 100%;
  padding: 0 0.3rem;
  box-sizing: border-box;
}
.product-con .product-intro .conter div {
  width: 100% !important;
}

.noscroll {
  height: 100%;
  overflow: hidden;
}
</style>
<style scoped lang="scss">
.name {
  color: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  font-size: 0.28rem;
}
#title0 {
  .active_label1 {
    width: 100%;
    height: 1.16rem;
    background: url("../../assets/images/cutPrice/label_bg.png") no-repeat;
    background-size: 100% 100%;
    .free_buy {
      width: 100%;
      height: 100%;
      // display: flex;
      // align-items: center;
      overflow: hidden;
      .left {
        float: left;
        margin-left: 1.28rem;
        font-size: 0.56rem;
        font-weight: 600;
        line-height: 1;
        padding-top: 0.3rem;
        color: rgba(255, 255, 255, 1);
        // line-height:25px;
        // letter-spacing:1px;
      }
      .right {
        float: right;
        width: auto;
        height: 100%;
        margin-right: 0.14rem;
        .likeTitle {
          font-size: 0.24rem;
          font-weight: 400;
          color: rgba(229, 57, 81, 1);
          line-height: 0.34rem;
          padding: 0.1rem 0rem 0.06rem 0;
        }
        .time {
          font-size: 0.28rem;
          font-weight: 300;
          color: rgba(212, 62, 86, 1);
          line-height: 0.34rem;
          .block {
            min-height: 0.34rem;
            display: inline-block;
            font-weight: 300;
            color: rgba(255, 255, 255, 1);
            background: rgba(229, 57, 81, 1);
            border-radius: 0.04rem;
            width:0.56rem;
            text-align: center;
          }
          .colon{
            font-size: 0.28rem;
            font-weight: bold;
            color: #D43E56;
            margin:0 0.04rem;
          }
        }
      }
    }
  }
  .wrapper {
    .cut_attr {
      margin-left: 0.28rem;
      font-size: 0.24rem;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.7);
      padding-bottom: 0.26rem;
      & span:last-child {
        color: rgba(0, 0, 0, 0.6);
        font-weight: 400;
      }
    }
  }
}
.mask1 {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  // bottom:0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  // transition: all 1s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  // transform: translate3d(0, 100%, 0);
  //   transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  //   opacity: 0;
  .content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    // height:5.9rem;
    background: #fff;
    border-radius: 0.4rem 0.4rem 0px 0px;
    font-size: 0.28rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    box-sizing: border-box;
    // transform: translateY(0%);
    // transition: all .3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
    // opacity: 0;
    .top {
      width: 100%;
      height: 0.96rem;
      text-align: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      line-height: 0.96rem;
    }
    .center {
      font-weight: 400;
      color: rgba(0, 0, 0, 0.8);
      line-height: 0.44rem;
      padding: 0.56rem 0.28rem 0.78rem 0.32rem;
      p:nth-child(2) {
        margin: 0.16rem 0;
      }
    }
    .bottom {
      // padding:0.26rem 0 0.36rem 0;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      color: rgba(68, 115, 225, 1);
      text-align: center;
      height: 1.06rem;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.32rem;
      font-weight: 500;
    }
  }
}
.footer {
  z-index: 500;
  .bnt {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
  .buy {
    border-radius: 0.08rem 0 0 0.08rem;
    background: linear-gradient(90deg, #ffbe52 0%, #ff845e 100%);
    flex: 1;
  }
  .buy1 {
    width: 100%;
    background: linear-gradient(270deg, #fa2b37 0%, #ff525d 100%);
    border-radius: 0.08rem;
  }
  .end{
    background: #DDDDDD;
    color: #666666;
  }
  .joinCart {
    width: 3.78rem;
    background: linear-gradient(270deg, #fa2b37 0%, #ff525d 100%);
    border-radius: 0 0.08rem 0.08rem 0;
  }
}
.record {
  width: 100%;
  background-color: #fff;
  margin-top: 0.2rem;
  padding-bottom: 0.58rem;
  .title {
    display: flex;
    align-items: center;
    text-align: center;
    padding: 0.38rem 0 0.14rem 0;
    box-sizing: border-box;
    margin-left: 1.08rem;
    span {
      font-size: 0.28rem;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.3);
      margin: 0 0.36rem;
    }
    img {
      width: 1.68rem;
    }
  }
  .free {
    width: 6.94rem;
    height: 1.12rem;
    background: rgba(252, 64, 74, 0.09);
    border-radius: 0.08rem;
    font-size: 0.28rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    margin: 0 auto;
    text-align: center;
    line-height: 1.12rem;
    margin-bottom: 0.36rem;
    i {
      font-size: 0.48rem;
      font-weight: 600;
      color: #fc404a;
      margin: 0 0.16rem;
    }
  }
  .item {
    width: 6.16rem;
    height: 0.88rem;
    background: url("../../assets/images/cutPrice/record_bg.png") 0 0 no-repeat;
    background-size: 100% 100%;
    margin: 0 auto 0.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      margin-left: 0.06rem;
      .avatar {
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        // padding:0.1rem;
        box-sizing: border-box;
        margin-right: 0.12rem;
        border: 0.06rem solid #fff;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .des {
        display: flex;
        flex-direction: column;
        // align-items: center;
        justify-content: center;
        font-size: 0.3rem;
        font-weight: 400;
        color: #f79a00;
        line-height: 0.42rem;
        .des_name {
        }
        .des_text {
          font-size: 0.2rem;
        }
      }
    }
    .right {
      margin-right: 0.28rem;
      font-size: 0.22rem;
      font-weight: 400;
      color: #ff3c39;
      line-height: 0.32rem;
      i {
        font-size: 0.42rem;
        margin: 0 0.16rem;
      }
    }
  }
}
.share_tip{
  width:100%;
  height:100vh;
  position: fixed;
  top:0;
  bottom:0;
  background: transparent;
  z-index: 999;
  div{
    width:2.92rem;
    height: auto;
    position: absolute;
    right: 0.1rem;
    top:0.1rem;
    img{
      width:100%;
      height:100%;
    }
  }
}
</style>
